<script setup lang="ts">
import data from './conversation.json'
// TODO 待写
</script>

<template>
  <div class="problem overflow-scroll" data-aos="zoom-in">
    <div class="main max-w-[85%] ml-auto mr-auto pt-10">
      <!-- 标题 -->
      <div
        class="character w-64 max-w-[90%] text-[#f3f4d9] h-16 flex items-center justify-center m-auto relative"
      >
        <div class="icon w-8 h-8 absolute left-[6.1%]"></div>
        <p class="text-2xl tracking-[0.5em] pl-10">常见问题</p>
      </div>
    </div>
    <!-- 内容框 -->
    <div class="dialog m-auto w-[88%] pt-24 md:pt-32 min-h-[65vh] pl-[16%] relative -mt-3">
      <div
        class="chat bg-[#828f7b] w-[80%] p-1 pb-3 rounded-lg relative mb-6"
        v-for="(problem, idx) in data"
        :key="idx"
      >
        <p class="text-left text-white text-xs pt-2 pl-2 pr-2">问题：{{ problem.problem }}</p>
        <p v-if="problem.reply" class="text-left text-white text-xs pt-2 pl-2 pr-2">
          客服回复：{{ problem.reply }}
        </p>
        <div class="solution w-12 h-12 absolute right-[-10px] top-[-14px]">
          <p class="text-center text-[#f3f4d9] text-[13px] tracking-[0.1em] pt-4">
            {{ problem.status == 'open' ? '待回复' : '解决' }}
          </p>
        </div>
      </div>
      <div class="clear w-40 h-10 absolute bottom-2.5 left-[50%] translate-x-[-50%]">
        <p class="text-[#f3f4d9] text-center text-lg tracking-[0.2em] pt-1">清除历史记录</p>
      </div>
    </div>
    <!-- 常见问题 -->
    <div class="flex max-w-[70%] m-auto mt-3">
      <div class="ticket w-20 h-6 m-auto"></div>
      <div class="make_appoint w-20 h-6 m-auto"></div>
      <div class="refund w-20 h-6 m-auto"></div>
    </div>
    <!-- 文本框 -->
    <div class="bottom mt-10 flex justify-center mb-4">
      <input class="input w-52 ml-3 h-10 text-primary border-none outline-none pl-5" />
      <div class="confirm bg-slate-500 w-24 h-10 ml-2 mr-3 rounded-full">
        <p class="text-center text-[#f3f4d9] md:text-xl text-lg tracking-[0.2em] pt-1">确认</p>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.solution {
  background: url('../../assets/img/radius.png');
}
.clear,
.confirm {
  background: url('../../assets/img/button.png');
}
.input {
  background: url('../../assets/img/input.png');
}
.ticket {
  background: url('../../assets/img/goupiao2x.png');
}
.make_appoint {
  background: url('../../assets/img/yuyue2x.png');
}
.refund {
  background: url('../../assets/img/tuipiao2x.png');
}
.icon {
  background: url('../../assets/img/problem_icon.png');
}

.character {
  background: url('../../assets/img/title.png');
}

.dialog {
  background: url('../../assets/img/dialog.png');
}

.solution,
.section,
.icon,
.dialog,
.input,
.ticket,
.confirm,
.clear,
.make_appoint,
.refund,
.character {
  background-size: 100% 100%;
}
</style>
